<template>
  <div class="sport-page">
    <video class="video-container" :src="videoUrl" :direction="90" />
    <div class="flex-row">
      <span>本周运动累计时长：</span>
      <g-timer name="sport" @lastTimeChange="onTimeChange" />
    </div>
    <van-divider>题目</van-divider>
    <div class="question-item">
      <div class="question-item__title">1: 请对您本次运动后的疲劳程度进行评分</div>
      <picker :range="options1" :disabled="hasSaved" range-key="tiredKey" @change="onAnswerChange($event, 'answer1')">
        <div class="picker-inner">
          <span v-if="form.tiredKey" class="picker-item__value">{{ form.tiredKey }}</span>
          <span v-else class="picker-placeholder">请选择</span>
          <van-icon name="arrow" />
        </div>
      </picker>
    </div>
    <div class="question-item">
      <div class="question-item__title">2: 完成本次运动后，您身体有无不适？</div>
      <picker :range="options2" :disabled="hasSaved" @change="onAnswerChange($event, 'answer2')">
        <div class="picker-inner">
          <span v-if="form.weak" class="picker-item__value">{{ form.weak }}</span>
          <span v-else class="picker-placeholder">请选择</span>
          <van-icon name="arrow" />
        </div>
      </picker>
      <van-field v-if="form.weak === '有'" v-model="form.weakRemark" :disabled="hasSaved" type="textarea" :rows="2" placeholder="请输入不适详情" />
    </div>
    <fixed-bottom v-if="!hasSaved" text="提交答案" @click="saveAnswer" />
  </div>
</template>

<script>
import { Divider, Icon, Field } from 'vant'
import GTimer from '@/components/GTimer.vue'
import FixedBottom from '@/components/FixedBottom'
import { saveMoveAnswer, SPORT_OPTIONS } from '../api'
import dayjs from 'dayjs'
import Taro from '@tarojs/taro'

export default {
  components: {
    GTimer,
    FixedBottom,
    [Divider.name]: Divider,
    [Icon.name]: Icon,
    [Field.name]: Field
  },
  props: {
    videoUrl: {
      type: String,
      default: ''
    },
    articleId: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      form: {
        articleId: '',
        tiredKey: '',
        tiredLevel: '',
        tiredHeart: '',
        weak: '',
        weakRemark: '',
        duration: 0
      },
      options1: SPORT_OPTIONS,
      options2: [
        '有',
        '无'
      ],
      hasSaved: false
    }
  },
  methods: {
    onAnswerChange(e, prop) {
      if (prop === 'answer1') {
        Object.assign(this.form, this.options1[e.detail.value])
      } else {
        this.form.weak = this.options2[e.detail.value]
      }
    },
    saveAnswer() {
      if (!this.form.tiredKey || !this.form.weak) {
        Taro.showToast({
          title: '请回答以上两个问题',
          icon: 'none'
        })
        return
      }
      if (this.form.weak === '有' && !this.form.weakRemark) {
        Taro.showToast({
          title: '请输入不适详情',
          icon: 'none'
        })
        return
      }
      this.form.articleId = this.articleId
      this.form.duration = dayjs().startOf('day').diff(this.lastTime, 'm', true).toFixed()
      saveMoveAnswer(this.form).then(res => {
        Taro.showToast({
          title: '已保存',
          icon: 'success'
        })
        this.hasSaved = true
      })
    },
    onTimeChange(lastTime) {
      this.lastTime = lastTime
    }
  }
}
</script>

<style lang="less">
.sport-page {
  .question-item {
    border-bottom: 1px solid #eeeeee;
    margin-bottom: 40px;
    .van-cell {
      border: 1px solid #f5f5f5;
      border-radius: 8px;
      margin-bottom: 20px;
    }
  }
  .picker-inner {
    display: flex;
    align-items: center;
    height: 100px;
  }
  .picker-item__value {
    flex:1
  }
  .picker-placeholder {
    flex: 1;
    color: #cccccc;
  }

  .van-field__control {
    min-height: 60px;
    height: 80px;
  }
}
</style>
